<!DOCTYPE html>
<html lang="en">
<head>
  <title>${(article.title)!menuList[0].name} | GugeeData</title>
  <meta charset="UTF-8">
  <meta name="baidu-site-verification" content="7Kv8mw99Qh" />
  <meta name="google-site-verification" content="YPMm_1_f59WXKSd04F1LGCjKeDGVrf_ajrylNKEDtqg" />
  <meta name="viewport" content="width=device-width">
  <meta name="keywords" content="${(article.title)!menuList[0].name}, TikTok Followers Comparison, TikTok Analytics, TikTok Hashtags, TikTok Follower Count, TikTok Videos, TikTok Trend, TikTok Dance, Hot TikTok, TikTok Search, Popular TikTok Songs, GugeeData">
  <meta property="og:title" content="${(article.title)!menuList[0].name} | GugeeData">
  <meta name="twitter:title" content="${(article.title)!menuList[0].name} | GugeeData">
  <#if article??>
      <meta property="og:description" content="${article.description}">
      <meta name="twitter:description" content="${article.description}">
      <meta name="description" content="${article.description}">
  </#if>
  <link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
  <link rel="stylesheet" href="${request.contextPath}/static/css/common.css">
  <link rel="stylesheet" href="${request.contextPath}/static/css/help.css">
</head>
<body>
  <#include "../header.ftl">
  <main>
    <div class="help-center main-page">
      <div class="left">
        <ul>
          <#list menuList as menu>
            <li class="center-tab" data-id="${menu.id}">
              <#if menu.subMenus?? && (menu.subMenus?size > 0)>
                <div onclick="openSub(this)">
                  <i class="iconfont ${menu.icons}"></i>
                  <span>${menu.name}</span>
                  <i class="iconfont iconup1"></i>
                  <i class="iconfont icondown1"></i>
                </div>
                <div class="sub">
                  <ul>
                    <#list menu.subMenus as subMenu>
                      <li class="sub-tab" data-id="${subMenu.id}">
                         <#if subMenu.url??>
                            <a href="${contextPath}${subMenu.url}">
                              ${subMenu.name}
                            </a>
                         <#else>
                           <a href="#">
                             ${subMenu.name}
                           </a>
                         </#if>
                      </li>
                    </#list>
                  </ul>
                </div>
              <#else>
                <div>
                  <#if menu.url??>
                    <a href="${contextPath}${menu.url}">
                      <i class="iconfont ${menu.icons}"></i>
                      <span>${menu.name}</span>
                    </a>
                  <#else>
                    <a href="#">
                      <i class="iconfont ${menu.icons}"></i>
                      <span>${menu.name}</span>
                    </a>
                  </#if>
                </div>
              </#if>
            </li>
          </#list>
        </ul>
      </div>
      <div class="right">
        <div class="top" style="display: none">
          <#--  <input placeholder="Please enter keywords here.." id="keyword" name="keyword"/>
          <button>Search</button>
          <#if isSearch>
            <div class="con-search">
              1414
              <span>results</span>
            </div>
          </#if>  -->
          <i class="iconfont iconicon_previous"></i>
          <a href="javascript:history.back(-1)">back</a>
        </div>
        <div class="content">
          <#if articles?? >
            <#include "./articles.ftl">
          <#else>
            <#include "./article.ftl">
          </#if>
        </div>
      </div>
    </div>
  </main>
  <#include "../footer.ftl">
  <script>
    let currentMenuId = '${currentMenuId}'

    let tabs = document.querySelectorAll('.center-tab')
    for(let i=0;i<tabs.length;i++) {
      if (currentMenuId == tabs[i].getAttribute('data-id')) {
        tabs[i].classList = 'center-tab is-active'
        break
      }
      let subMenus = tabs[i].querySelectorAll('.sub .sub-tab')
      for(let j=0;j<subMenus.length;j++) {
        if(currentMenuId == subMenus[j].getAttribute('data-id')){
          subMenus[j].classList = 'sub-tab is-active'
          tabs[i].classList = 'center-tab is-active'
          break
        }
      }
    }

    function openSub(_this){
        let $_this = _this.parentNode
        if ($_this.querySelectorAll('.sub').length > 0) {
            let display = $_this.querySelectorAll('.sub')[0].style.display
            if(display === 'block' || display === ''){
              $_this.querySelectorAll('.sub')[0].style.display = 'none'
              $_this.querySelectorAll('.iconup1')[0].style.display = 'none'
              $_this.querySelectorAll('.icondown1')[0].style.display = 'block'
            } else {
              $_this.querySelectorAll('.sub')[0].style.display = 'block'
              $_this.querySelectorAll('.iconup1')[0].style.display = 'block'
              $_this.querySelectorAll('.icondown1')[0].style.display = 'none'
            }
        }
    }
  </script>
</body>
</html>
